<template>
  <div class="page_box">
    <div class="edit">
      <mavon-editor v-model="value" @change="change" @imgAdd="imgAdd" />
    </div>
    <div class="show" v-html="html"></div>
  </div>
</template>

<script>
export default {
  name: "mavoneditorPage",
  data() {
    return {
      value: "",
      html: "",
    };
  },
  methods: {
    // 输入区域改变
    // 回显到模版
    change(value, render) {
      console.log("render", render);
      this.html = render;
    },
    // 添加图片   ** 未验证
    imgAdd(pos, $file) {
      //新建form表单类型的数据
      let formData = new FormData();
      //将我们上传的图片地址$file加进表单里面，命名为“file”（参数名字与后端相匹配）
      formData.append("file", $file);
      console.log(formData);
      //   axios({
      //     url: this.$api + "icommunity/post/getImageUrl", //请求地址
      //     method: "POST",
      //     data: formData,
      //     headers: { "Content-Type": "multipart/form-data" },
      //   }).then((res) => {
      //     if (res.status === 200) {
      //       // 将后端返回的url放在md中图片的指定位置
      //       this.$refs.md.$img2Url(pos, res.data.data);
      //     } else {
      //       this.$message.error(res.message);
      //     }
      //   });
      //访问后台服务器方法
    },
  },
};
</script>

<style scoped lang="scss">
.page_box {
  .edit {
    width: 100%;
    height: 300px;
    margin-bottom: 10px;
  }
  .show {
    height: 300px;
    border: 1px solid #ededed;
  }
}
</style>
